<template>
    <div class="login">
        <div class="container">
            <header>Sanhuamao</header>
            <s-input
                :rules="rules.username"
                :value="loginForm.username"
                @update="update"
                name="username"
                style="text-align: center"
            />

            <s-input
                :rules="rules.password"
                :value="loginForm.password"
                @update="update"
                name="password"
                style="text-align: center"
                type="password"
            />

            <s-checkbox
                :checked="loginForm.remember"
                name="remember"
                @update="update"
                label="记住密码"
                style="
                    color: white;
                    font-weight: 200;
                    margin: 10px 0 10px 56px;
                    align-self: flex-start;
                "
            />
            <s-button
                style="margin: 16px; width: 184px; text-align: center"
                @click="login"
                >登录</s-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { SInput, SButton, SCheckbox } from "@/components"
import { useUser } from "@/hooks"
import { IRulesProp, BaseForm } from "@types"
const { loginForm, login } = useUser()

const rules: IRulesProp = {
  username: [{ type: "required", message: "用户名不能为空" }],
  password: [{ type: "required", message: "密码不能为空" }]
}

const update = (param:BaseForm) => {
  loginForm[param.name] = param.value
}

</script>

<style scoped lang="less">
.login {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: @mainColor;
    .container {
        padding: 30px 0;
        width: 300px;
        margin: 200px auto;
        border-radius: @bigRadius;
        align-items: center;
        display: flex;
        flex-direction: column;
        background: @secondColor;
        box-shadow: @bigShadow;
        header {
            color: @white;
            text-align: center;
            font-weight: bold;
            font-size: 1.4em;
            margin-bottom: 24px;
        }
        .input-container {
            margin-top: @itemSpace;
        }
    }
}
</style>
